<template>
  <div
    class="yl-container"
    :style="{
      backgroundImage: 'url(' + this.GLOBAL.FILE_URL + '/background.png' + ')',
      backgroundSize:'100% 100%',
      backgroundRepeat: 'no-repeat',
      backgroundPosition: '50%',
      backgroundAttachment: 'fixed'
      }">
    <div class="yl-login-top">
      <span>Vue-element-admin-zero</span>
    </div>
    <div class="yl-login-left">
      <img :src="this.GLOBAL.FILE_URL + '/loginImg.png'" alt="">
    </div>
    <div class="yl-login-right">
      <img :src="this.GLOBAL.FILE_URL + '/avator.png'" alt="">
      <h3>WELCOME</h3>
      <h3>财务预算管理系统</h3>
      <div class="yl-login-form">
        <el-form ref="form" :rules="rules" :model="form" label-width="80px">
          <el-form-item prop="account">
            <el-input type="text" v-model="form.account" placeholder="请输入账号" prefix-icon="el-icon-user-solid" clearable></el-input>
          </el-form-item>
          <br>
          <el-form-item prop="password">
            <el-input type="password" v-model="form.password" placeholder="请输入密码" prefix-icon="el-icon-lock" clearable show-password></el-input>
          </el-form-item>
          <br>
          <el-form-item>
            <el-button type="primary" round style="width: 100%" @click="loginSubmit" :loading="isSubmitLoading">LOGIN</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
// import {
//   getUserInfo
// } from '@/utils/auth'
import storage from '@/utils/storage'
import { getUserInfo } from '../../../utils/auth'
export default {
  data () {
    return {
      // 登陆提交后按钮旋转样式
      isSubmitLoading: false,
      // 登录信息
      form: {
        account: '',
        password: ''
      },

      rules: {
        account: [
          { required: true, message: '请输入账号', trigger: blur },
          { min: 1, max: 8, message: '账号不能为空', trigger: blur }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: blur },
          { min: 1, max: 10, message: '密码不能为空', trigger: blur }
        ]
      }
    }
  },
  created () {
    // 新增键盘事件enter
    var _this = this
    document.onkeydown = function (e) {
      let key = window.event.keyCode
      if (key === 13) {
        _this.loginSubmit()
      }
    }
  },
  methods: {
    // 登录提交
    loginSubmit () {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.isSubmitLoading = true
          // 解决异步加载比页面渲染慢的问题
          this.$store.dispatch('Login', this.form)
            .then(() => {
              console.log(getUserInfo())
              if (JSON.stringify(getUserInfo()) != '{}') {
                this.$router.push('/index')
              } else {
                this.$modal.danger(this, '登录失败')
                this.isSubmitLoading = false
              }
            })
            .catch(() => {
              this.isSubmitLoading = false
            })
        } else {
          this.$modal.danger(this, '请完善数据')
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
